<!--
 * @Description:
 * @Author: Harry
 * @Date: 2021-12-05 20:03:28
 * @Url: https://u.mr90.top
 * @github: https://github.com/rr210
 * @LastEditTime: 2021-12-16 16:02:28
 * @LastEditors: Harry
-->
<template>
<!--  <div class="themec">-->
<!--    <img :src="'./static/image/icon/' + themeC + '.png'" @click="clickTheme" alt="主题变化" title="主题变化" />-->
<!--  </div>-->
</template>

<script>

import debounce_merge from '../../../utils/debounce'
export default {
  name: "LightDark",
  data(){
    return{
      themeC:'light'
    }
  },
  methods:{
     clickTheme : debounce_merge(function () {
      this.themeC = this.themeC === 'dark' ? 'light' : 'dark'
      document.head.querySelector('#skin').setAttribute('href', `./static/css/theme/${this.themeC}.css`)
    }, 500, true)
  }
}
</script>

<style lang="less" scoped>
.themec {
  width: 30px;
  height: 30px;
  position: absolute;
  right: 1%;
  z-index: 99;
  @media only screen and(max-width:870px) {
    right: 16%;
    width: 25px;
    height: 25px;
  }
  img {
    width: 100%;
  }
}
</style>
